<template>
    <!--swiper的bug，如果数据是从网络获取的，那么自动轮播到最后一页之后就不轮播了-->
    <!--只需要在swiper组件上面加上 v-if="数据.length > 0" 就可以解决-->
    <swiper :options="swiperOptions" class="banner" v-if="banners.length > 0">
        <!-- slides v-for="value in banners" :key="value.bannerId" -->
    <swiper-slide v-for="value in banners" :key="value.bannerId" class="item">
        <a :href="value.url">
            <img :src="value.pic" alt="">
        </a>
    </swiper-slide>
    <!-- 分页 -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
// import style (<= Swiper 5.x)
import 'swiper/dist/css/swiper.css'
export default {
    name: 'Banner',
    data() {
        return {
          swiperOptions: {
              loop:true, //循环模式选项
              autoplay:{
                  delay:1000, // 自动切换的时间间隔，单位ms
                  stopOnLastSlide:false, // 当切换到最后一个slide时停止自动切换
                  disableOnInteraction:false // 用户操作swiper之后，是否禁止autoplay
              },
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination'
          },
          observer:true,
          observeParents:true,
          observeSlideChildren:true
        }
      }
    },
        props:{
            banners:{
                type:Array,
                default:[],
                required:true
            }
        },
        components:{
            swiper,
            swiperSlide
        }
    }
</script>
<style scoped lang="scss">
.banner{
    .item{
        img{
            width: 100%;
            height: 300px;
        }
    }
}
</style>

<style lang="scss">
@import '../../assets/css/mixin';
/* 注意点：如果想覆盖swiper的样式，那么style标签不能是scoped的，否则无法覆盖 */
.banner{
    .swiper-pagination-bullet{
        width: 16px;
        height: 16px;
        background-color: #fff;
        opacity: 1;
    }
    // 激活状态 颜色应该与背景颜色一样，切换也要一样
    .swiper-pagination-bullet-active{
        @include bg_color()
    }
}
</style>